import React, { useState, useEffect, useContext } from 'react'
import './Order.less';
import { observer } from 'mobx-react';
import { Input, Col, Row, Select, InputNumber, DatePicker, AutoComplete, Cascader, Button, Radio } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
// 表格
import { Table, Tooltip, Tag, Space, } from 'antd';
// 轮播
import { Carousel } from 'antd';
// 详情页
import Inquire from './Nquire.js'
import { useHistory, BrowserRouter, Switch, Route } from 'react-router-dom'
import { from } from 'pumpify';
import ss from '../../images/beijing.jpg'
// 分页
import { Pagination } from 'antd';
//引入http
import http from '../../utils/http';
// 时间转换
import * as dayjs from 'dayjs';
// mobx的使用
// import { ContextAPI } from '../../index'
// import { Observer } from 'mobx-react';
import orderMobx from '../../mobx/order'

const contentStyle = {
    width: '130px',
    height: '80px',
    color: '#fff',
    lineHeight: '80px',
    textAlign: 'center',
};
const { Option } = Select;
const { TextArea } = Input;
const Order = () => {
    // const context = useContext(ContextAPI);
    // console.log(context,45566)
    // const options = [
    //     {

    //     }
    //   ];
    const history = useHistory(); //跳转
    const xiala = ['订单编号', '物流单号']   //订单数据
    const lianxi = ['店铺名称', '收货人名称', '收货人手机号'] //货物
    const date = ['创建时间', '支付时间', '发货时间', '完成时间']  //时间查询
    const order = ['全部','待付款', '待发货', '待收货', '已完成', '已失效']  //订单状态
    const j_order = ['全部', '未结算', '已结算']  //结算状态
    // 编号类型
    const dingdanxiala=(value)=>{
        
        orderMobx.setDingdanleixin(value)
       
    }
    //订单数据input值函数
    function dingdanwuliubianhao(value) {
       
        orderMobx.setBianhaoshuju(value)
       
    }
    // 商品名称的值
    function shangpininput(e){
        orderMobx.setShangpin(e.target.value)

    }
    //收货的昵称状态
    function shouhuozhuangtai(value){
        orderMobx.setWeixinnichneg(value);

    }
    // 收获的昵称inpu数据
    function shouhuoinput(value){
        orderMobx.setWeixininput(value)
        // console.log(orderMobx.weixininput,65985645)
    }
    // 时间的类型
    function timeliexin(value){
        orderMobx.setTimeliexin(value);
        // console.log(orderMobx.timeliexin)
    }
    // 时间数据
    function itmedata(value,mode){
        // orderMobx.setOrdertimedata(mode)
        // 开始时间
        orderMobx.setTimeinputkai(dayjs(mode[0]).valueOf())
        // 结束时间
        orderMobx.setTimeinputjie(dayjs(mode[1]).valueOf())
        
    }
    // 订单状态
    function ordrstate(value){
            let shu;
            if(value=="待付款"){
                shu=1
            }else if(value=="待发货"){
                shu=2
            }else if(value=="待收货"){
                shu=3
            }else if(value=="已完成"){
                shu=4
            }else if(value=="已失效"){
                shu=5
            }
           orderMobx.setOrderstatus(shu)
    }
    // 结算状态
    function ordertype(value){
        let jiesuan;
        if(value=="未结算"){
            jiesuan=0
        }else if(value=="已结算"){
            jiesuan=1
        }
        orderMobx.setJiestatus(jiesuan)
    }
    // 点击搜索
    function sosuo(){
        let data2=[]
        http({
            url: '/wangfanghua/order/mohuchax',
            method: 'get',
            data: {
                page: orderMobx.page,
                size: orderMobx.size,
                dingdanleixin: orderMobx.dingdanleixin,
                bianhaoshuju: orderMobx.bianhaoshuju,
                shangpin: orderMobx.shangpin,
                weixinnicheng: orderMobx.weixinnicheng,
                weixininput: orderMobx.weixininput,
                timeliexin: orderMobx.timeliexin,
                timeinputkai: orderMobx.timeinputkai,
                timeinputjie: orderMobx.timeinputjie,
                orderstatus: orderMobx.orderstatus,
                jiestatus: orderMobx.jiestatus
            }
        }).then((res)=>{
            // console.log(res)
            if ((res.code >= 200 && res.code < 300) || res.code == 304) {
                let arrData=[]
                let json = {}
                console.log(res.data.data,res.data.data2)
                res.data.data.forEach(v=>{
                    res.data.data2.forEach(v2=>{
                        if(v.order_id==v2.order_id){
                            if(!json[v2.order_id])json[v2.order_id]={}
                            if(!json[v2.order_id].jianshu)json[v2.order_id].jianshu=0
                            if(!json[v2.order_id].image_url)json[v2.order_id].image_url=[]
                            json[v2.order_id].image_url.push(v2.image_url)
                            json[v2.order_id].jianshu+=v2.w_order_goods_center_num
                        }
                    })
                    if (v.state == 1) {
                        v.staet = '待付款';
                    } else if (v.state == 2) {
                        v.staet = '待发货';
                    } else if (v.state == 3) {
                        v.staet = '待收货';
                    } else if (v.state == 4) {
                        v.staet = '已完成';
                    } else {
                        v.staet = '已失效';
                    }
                    if (v.type == 1) {
                        v.type = '未结算'
                    } else {
                        v.type = '已结算'
                    }
                    v.operation_time = dayjs(Number(v.operation_time)).format('YYYY-MM-DD hh:mm:ss')
                    arrData.push({
                        key:v.order_id,
                        express_no:v.express_no,
                        image_url:json[v.order_id].image_url,
                        jianshu:json[v.order_id].jianshu,
                        zhuangtai:v.staet,
                        dianpu:v.store_name,
                        shifukuan:v.sell_price*json[v.order_id].jianshu,
                        user: {
                                 user_name:v.user_name,
                                user_tel: v.tel
                            },
                            date:v.operation_time,
                            jiesuanzhuantai:v.type
                    })
                })
                
               
                Fdata(arrData)
                setCount(res.data.count)
                // let arr = [...res.data.data];
                // setCount(res.data.count)
                // for (let i in arr) {
                //     if (arr[i].state == 1) {
                //         arr[i].staet = '待付款';
                //     } else if (arr[i].state == 2) {
                //         arr[i].staet = '待发货';
                //     } else if (arr[i].state == 3) {
                //         arr[i].staet = '待收货';
                //     } else if (arr[i].state == 4) {
                //         arr[i].staet = '已完成';
                //     } else {
                //         arr[i].staet = '已失效';
                //     }
                //     if (arr[i].type == 1) {
                //         arr[i].type = '未结算'
                //     } else {
                //         arr[i].type = '已结算'
                //     }
                //     arr[i].operation_time = dayjs(Number(arr[i].operation_time)).format('YYYY-MM-DD hh:mm:ss')
                //     // console.log(arr[i].id,9999999)
                //     let arr1 = [];
                //     arr1.push(arr[i].image_url);
                //     arr1.push(arr[i].logo);
                //     data2.push({
                //         key: arr[i].order_id,
                //         ggg: {
                //             express_no: arr[i].express_no,
                //             image: [
                //                 arr[i].image_url,
                //                 arr[i].logo
                //             ]
                //             // image:arr1
                //         },
                //         jianshu: arr[i].ordernum,
                //         zhuangtai: arr[i].staet,
                //         dianpu: arr[i].store_name,
                //         shifukuan: arr[i].actual_payment,
                //         user: {
                //             user_name: arr[i].user_name,
                //             user_tel: arr[i].tel
                //         },
                //         date: arr[i].operation_time,
                //         jiesuanzhuantai: arr[i].type
                //     })

                // }
                // Fdata(data2)
            }
        })
    }
    // 分页
    let [count, setCount] = useState() //总数
    function onShowSizeChange(current, pageSize) {
        // console.log(current,pageSize);

    }
    const wonChange = (page, pageSize) => {
        // console.log(context.page)
        orderMobx.setPage(page);
        orderMobx.setSize(pageSize)
        // setSize(pageSize);

        orderchanxun()
        console.log(page, pageSize);
    }
    // 表格
    const columns = [
        {
            title: '商品信息',
            dataIndex: 'ggg',
            key: 'ggg',
            render: (ggg,recode) => {
                return (
                    <div>
                        <div className="biaonhao">
                            <p className="W_biaonhao_p">订单编号：</p><p>{recode.express_no}</p>
                        </div>
                        <Carousel style={{ width: 130, height: 80 }} autoplay>
                            {
                                    recode.image_url.map((v, i) => {
                                        return <div key={i}>
                                            <img style={contentStyle} src={v} alt="" />
                                        </div>
                                    })
                                
                                // console.log(data)
                            }


                        </Carousel>
                    </div>
                )
            },
            width: 250,
        },
        {
            title: '件数',
            dataIndex: 'jianshu',
            key: 'jianshu',
            render: jianshu => (
                <Tooltip placement="topLeft" title={jianshu}>
                    共{jianshu}件
                </Tooltip>
            ),
            width: 80,
        },
        {
            title: '订单状态',
            dataIndex: 'zhuangtai',
            key: 'zhuangtai',
            ellipsis: {
                showTitle: false,
            },
            render: zhuangtai => (
                <Tooltip placement="topLeft" title={zhuangtai}>
                    {zhuangtai}
                </Tooltip>
            ),
        },
        {
            title: '店铺',
            dataIndex: 'dianpu',
            key: 'dianpu',
            width: 100,
            ellipsis: {
                showTitle: false,
            },
            render: dianpu => (
                <Tooltip placement="topLeft" title={dianpu}>
                    {dianpu}
                </Tooltip>
            ),
        },
        {
            title: '实付款',
            dataIndex: 'shifukuan',
            key: 'shifukuan',
            width: 90,
            ellipsis: {
                showTitle: false,
            },
            render: shifukuan => (
                <Tooltip placement="topLeft" title={shifukuan}>
                    ￥{shifukuan}
                </Tooltip>
            ),
        },
        {
            title: '买家',
            dataIndex: 'user',
            key: 'user',
            ellipsis: {
                showTitle: false,
            },
            render: user => (
                <Tooltip placement="topLeft" title={user}>
                    {user.user_name}/{user.user_tel}
                </Tooltip>
            ),
        },
        {
            title: '下单时间',
            dataIndex: 'date',
            key: 'date',
            ellipsis: {
                showTitle: false,
            },
            render: date => (
                <Tooltip placement="topLeft" title={date}>
                    {date}
                </Tooltip>
            ),
        },
        {
            title: '结算状态',
            dataIndex: 'jiesuanzhuantai',
            key: 'jiesuanzhuantai',
            ellipsis: {
                showTitle: false,
            },
            render: jiesuanzhuantai => (
                <Tooltip placement="topLeft" title={jiesuanzhuantai}>
                    {jiesuanzhuantai}
                </Tooltip>
            ),
        },
        {
            title: '操作',
            dataIndex: 'zhuangtai',
            key: 'zhuangtai',
            width: 150,
            render: (zhuangtai, record) => {
                if (zhuangtai == '待发货') {
                    return (
                        <Space className="biu">
                            <Button onClick={inquire.bind(this, record)} className="but" type="link">
                                详情
                            </Button>
                            <Button onClick={queding.bind(this, record)} className="but que" type="link">
                                确认发货
                            </Button>
                        </Space>
                    )
                } else {
                    return (
                        <Space className="biu">
                            <Button onClick={inquire.bind(this, record)} className="but" type="link">
                                详情
                            </Button>
                        </Space>
                    )
                }
            },
        },
    ];


// 清空函数
const qingchong=()=>{
    orderMobx.setBianhaoshuju('');
    orderMobx.setShangpin('');
    orderMobx.setWeixininput('');
    // orderMobx.setOrdertimedata('');
    orderMobx.setOrderstatus('全部');
    orderMobx.setJiestatus('全部');
}
    // 详细函数
    const [rowdata, setRowData] = useState({})
    const inquire = (record) => {
        // console.log(record.key);
        let arr2=record
        // console.log(arr2)
        // const user=record;
        sessionStorage.setItem('orderid', JSON.stringify(record.key))
        if (record.zhuangtai == '待付款' || record.zhuangtai == '待发货') {
            history.push({ pathname: '/admin/nquire' })
        } else if (record.zhuangtai == '待收货' || record.zhuangtai == '已完成') {
            history.push({ pathname: '/admin/nquire' })
        } else if (record.zhuangtai == '已失效') {
            history.push({ pathname: '/admin/invalid' })
        }

    }
    // 确定按钮
    const queding = (record) => {
        sessionStorage.setItem('user', JSON.stringify(record));
        history.push({ pathname: '/admin/nquire' })
    }
    //查询函数
    const [data, Fdata] = useState([])
    // const data=[];
    const orderchanxun = () => {
        // console.log(page2, 888888888888)
        let data2 = []
        http({ 
            url: '/wangfanghua/order',
            method: 'get',
            data: {
                page: orderMobx.page,
                size: orderMobx.size
            }
        }).then(res => {
            if ((res.code >= 200 && res.code < 300) || res.code == 304) {
                //  for (let i=0;i<res.data.data.length;i++) {
                //     if (arr[i].state == 1) {
                //         arr[i].staet = '待付款';
                //     } else if (arr[i].state == 2) {
                //         arr[i].staet = '待发货';
                //     } else if (arr[i].state == 3) {
                //         arr[i].staet = '待收货';
                //     } else if (arr[i].state == 4) {
                //         arr[i].staet = '已完成';
                //     } else {
                //         arr[i].staet = '已失效';
                //     }
                //     if (arr[i].type == 1) {
                //         arr[i].type = '未结算'
                //     } else {
                //         arr[i].type = '已结算'
                //     }
                //     arr[i].operation_time = dayjs(Number(arr[i].operation_time)).format('YYYY-MM-DD hh:mm:ss')
                // }
                   
               
                let arrData=[]
                let json = {}
                console.log(res.data.data,res.data.data2)
                res.data.data.forEach(v=>{
                    res.data.data2.forEach(v2=>{
                        if(v.order_id==v2.order_id){
                            if(!json[v2.order_id])json[v2.order_id]={}
                            if(!json[v2.order_id].jianshu)json[v2.order_id].jianshu=0
                            if(!json[v2.order_id].image_url)json[v2.order_id].image_url=[]
                            json[v2.order_id].image_url.push(v2.image_url)
                            json[v2.order_id].jianshu+=v2.w_order_goods_center_num
                        }
                    })
                    if (v.state == 1) {
                        v.staet = '待付款';
                    } else if (v.state == 2) {
                        v.staet = '待发货';
                    } else if (v.state == 3) {
                        v.staet = '待收货';
                    } else if (v.state == 4) {
                        v.staet = '已完成';
                    } else {
                        v.staet = '已失效';
                    }
                    if (v.type == 1) {
                        v.type = '未结算'
                    } else {
                        v.type = '已结算'
                    }
                    v.operation_time = dayjs(Number(v.operation_time)).format('YYYY-MM-DD hh:mm:ss')
                    arrData.push({
                        key:v.order_id,
                        express_no:v.express_no,
                        image_url:json[v.order_id].image_url,
                        jianshu:json[v.order_id].jianshu,
                        zhuangtai:v.staet,
                        dianpu:v.store_name,
                        shifukuan:v.sell_price*json[v.order_id].jianshu,
                        user: {
                                 user_name:v.user_name,
                                user_tel: v.tel
                            },
                            date:v.operation_time,
                            jiesuanzhuantai:v.type
                    })
                })
                
               
                Fdata(arrData)
                setCount(res.data.count)
                // let arrRes=[];
                // for(let i in arr){
                //     let arrCenter=[];
                //     let imageArr=[];
                //     let temp='';
                //     for(let j in arrgoods){
                //         if(arr[i].order_id==arrgoods[j].order_id){
                //             imageArr.push(arrgoods[j].image_url);
                //             arrCenter.push({
                //                 order_id:arr[i].order_id,
                //                 ggg:{
                //                     express_no:arr[i].express_no,
                //                     image:imageArr
                //                 }
                //             })
                //         }
                //     }
                //     arrRes.push(arrCenter[0]);
                // }
                // console.log(arrRes);
               
                // for (let i=0;i<arr.length;i++) {
                //     if (arr[i].state == 1) {
                //         arr[i].staet = '待付款';
                //     } else if (arr[i].state == 2) {
                //         arr[i].staet = '待发货';
                //     } else if (arr[i].state == 3) {
                //         arr[i].staet = '待收货';
                //     } else if (arr[i].state == 4) {
                //         arr[i].staet = '已完成';
                //     } else {
                //         arr[i].staet = '已失效';
                //     }
                //     if (arr[i].type == 1) {
                //         arr[i].type = '未结算'
                //     } else {
                //         arr[i].type = '已结算'
                //     }
                //     arr[i].operation_time = dayjs(Number(arr[i].operation_time)).format('YYYY-MM-DD hh:mm:ss')
                   
                //     let arr1 = [];
                //     arr1.push(arr[i].image_url);
                //     arr1.push(arr[i].logo);
                //     data2.push({
                //         key: arr[i].order_id,
                //         ggg: {
                //             express_no: arr[i].express_no,
                //             image: [
                //                 arr[i].image_url,
                //                 arr[i].logo
                //             ]
                //             // image:arr1
                //         },
                //         jianshu: arr[i].ordernum,
                //         zhuangtai: arr[i].staet,
                //         dianpu: arr[i].store_name,
                //         shifukuan: arr[i].actual_payment,
                //         user: {
                //             user_name: arr[i].user_name,
                //             user_tel: arr[i].tel
                //         },
                //         date: arr[i].operation_time,
                //         jiesuanzhuantai: arr[i].type
                //     })

                // }
                // Fdata(data2)
            }
            // console.log(data2[0].ggg.image,1888)
            // console.log(data,88888)

        })
    }
    useEffect(
        orderchanxun

        , [])

    return (
        // <Observer>
        // {
        // ()=>(
        <div className="big-card">
            <div className="card-header">
                <h2>订单管理</h2>
            </div>
            <div className="w_detail">
                {/* <img src={ss} alt="" /> */}
                <div className="w_box d-f f-w">
                    {/* 单号、名称、微信昵称条件查询框 */}
                    <div className="w_box2">
                        {/* 订单编号 */}
                        <div className="w_iunput">
                            <Input.Group  className="d-f w_order" compact>
                                <Select onChange={dingdanxiala} className="w_ding" defaultValue={xiala[0]}>
                                    {xiala.map((v, i) => {
                                        return (<Option   key={i} value={v}>{v}</Option>)
                                    })}
                                </Select>
                                <AutoComplete
                                    onChange={dingdanwuliubianhao}
                                    className="w_shu"
                                    placeholder="至少4位数字"
                                    maxLength={100}
                                    value={orderMobx.bianhaoshuju}
                                // onChange={onChange}
                                // value

                                />
                            </Input.Group>
                        </div>
                        {/* 商品名称 */}
                        <div className="d-f w_iunput">
                            <p className="w_dingj">商品名称</p>
                            <Input
                             onChange={shangpininput}
                              className="w_shu"
                               placeholder="请输入内容"
                               value={orderMobx.shangpin}
                                />
                        </div>
                        {/* 微信昵称 */}
                        <div className="w_iunput">
                            <Input.Group className="d-f w_order" compact>
                                <Select onChange={shouhuozhuangtai} className="w_ding" defaultValue={lianxi[0]}>
                                    {lianxi.map((v, i) => {
                                        return (<Option key={i} value={v}>{v}</Option>)
                                    })}
                                </Select>
                                <AutoComplete
                                onChange={shouhuoinput}
                                    className="w_shu"
                                    placeholder="请输入"
                                    maxLength={100}
                                    value={orderMobx.weixininput}
                                // onChange={onChange}

                                />
                            </Input.Group>
                        </div>
                    </div>

                    {/* 时间 */}
                    <div className="w_box2">
                        <div className="w_iunput">

                            <Input.Group className="d-f w_order" compact>
                                <Select onChange={timeliexin} className="w_ding" defaultValue='时间类型'>
                                    {date.map((v, i) => {
                                        return (<Option key={i} value={v}>{v}</Option>)
                                    })}
                                </Select>
                                <DatePicker.RangePicker
                                 onChange={itmedata}
                                  className='w_shu'
                                   placeholder="开结" 
                                 
                                />
                            </Input.Group>
                        </div>
                        {/* 订单状态 */}
                        <div className="d-f w_iunput">
                            <p className="w_dingj">订单状态</p>
                            <Select onChange={ordrstate} className="w_shu" defaultValue={order[0]}>
                                {order.map((v, i) => {
                                    return (<Option key={i} value={v}>{v}</Option>)
                                })}
                            </Select>
                        </div>
                        {/* 结算状态 */}
                        <div className="d-f w_iunput">
                            <p className="w_ding">结算状态</p>
                            <Select onChange={ordertype} className="w_shu" defaultValue={j_order[0]}>
                                {j_order.map((v, i) => {
                                    return (<Option key={i} value={v}>{v}</Option>)
                                })}
                            </Select>
                        </div>
                    </div>
                    <div className='w_anlou'>
                        <Button type="primary" onClick={sosuo}>搜索</Button>
                        <Button>导出报表</Button>
                        <Button type="dashed" onClick={qingchong}>清除条件 </Button>
                    </div>
                    <div>
                        <p className="dingdanliebiao">订单列表</p>
                        <p className="xian"></p>
                        {/* 表格 */}
                        <Table
                            pagination={false}
                            columns={columns}
                            dataSource={data}
                        //  onRow={(record,aaa) => {
                        //     return {
                        //       onClick: eventu => {
                        //         inquire(eventu);
                        //         //   console.log(record)
                        //       }
                        //     }
                        //   }
                        // }
                        />
                    </div>
                   
                </div>
                <div className="W_feiye">
                        <Pagination
                            pageSizeOptions={['5', '10', '20', '30']}
                            defaultPageSize={5}
                            showSizeChanger
                            onShowSizeChange={onShowSizeChange}
                            defaultCurrent={1}
                            total={count}
                            hideOnSinglePage='true'
                            onChange={wonChange}
                        />
                    </div>
            </div>
        </div>
    )

}

export default observer(Order);